<template>
	<view class='flex flex-column bg-1 h-full'>
		<view class="rounded-l bar flex flex-row items-center">
			<text class='member-gold-text'>会员费</text>
			<text class='flex-1 bar-main text-center'>
				<text class='text-s'>¥</text>
				<text class='member-gold-text text-xxl mx-1'>99.00</text>
				<text class='text-s'>/年</text>
			</text>
			<image src="/static/member/member-arrow-1.png" class='bar-img'></image>
		</view>
		<view class='flex-1 mx-3-1 mt-5-2 content rounded-l bg-white relative flex flex-column flex-center'>
			<view class='medal'>
				<text class='text-m font-semibold medal-color'>{{gradeInfo.text}}</text>
			</view>
			<view class="flex-1 flex flex-column flex-center">
				<text class='mb-2 medal-color font-semibold'>{{gradeInfo.des}}</text>
				<image :src="gradeInfo.img" style="width: 46px;height: 46px;"></image>
			</view>
			<view class='flex flex-row items-center'>
				<view class='line'></view>
				<view class='mx-2 medal-color-1 text-n flex flex-row flex-center'>
					<text>会员专享</text>
					<text class='text-xxl mx-1'>3</text>
					<text>大福利</text>
				</view>
				<view class='line'></view>
			</view>
			<uni-swiper-dot :info="info" :current="current" field="content" mode="dot" 
				style='height:200px;width: 100%;'
				:dots-styles="{
					width: 6,
					height: 6,
					selectedBackgroundColor: '#DAAD7F',
					backgroundColor: '#D8D8D8',
					border: '0px',
					selectedBorder: '0px'
				}">
				<swiper class="swiper-box" @change="change" style='height:200px;width: 100%;'>
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item flex flex-row items-center h-full">
							<view class='flex flex-column items-center w-p-33 px-2'>
								<image src="/static/member/article.png" style="width:34px;height:34px;"></image>
								<text class="my-2 text-center text-s break-normal whitespace-normal medal-color-1">每天查看免费文章个数</text>
								<text class='text-n font-semibold medal-color-1'>不限</text>
							</view>
							<view class='flex flex-column items-center w-p-33 px-2'>
								<image src="/static/member/member-list.png" style="width:34px;height:34px;"></image>
								<text class="my-2 text-center text-s break-normal whitespace-normal medal-color-1">每天查看其它会员信息个数</text>
								<text class='text-n font-semibold medal-color-1'>10</text>
							</view>
							<view class='flex flex-column items-center w-p-33 px-2'>
								<image src="/static/member/dynamic.png" style="width:34px;height:34px;"></image>
								<text class="my-2 text-center text-s break-normal whitespace-normal medal-color-1">每天查看其它会员动态个数</text>
								<text class='text-n font-semibold medal-color-1'>不限</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="py-8 px-6">
			<self-button extra-class='join-button' @click="toJoinMember">加入会员 解锁全部内容</self-button>
		</view>
	</view>
</template>
<script>
	import SelfButton from "@/components/common/SelfButton.vue";
	import "@/pages/article-detail/article-detail.scss";
	import { ref } from "vue";
	export default {
		components: {
			SelfButton
		},
		setup(){
			const grade = 0;
			const gradeInfo = [{
				text: "一级会员",
				des: "铜牌会员",
				img: "/static/member/medal-1.png"
			},{
				text: "二级会员",
				des: "银牌会员",
				img: "/static/member/medal-2.png"
			},{
				text: "三级会员",
				des: "金牌会员",
				img: "/static/member/medal-3.png"
			}][grade];
			const current = ref(0);
			function change(e) {
				current.value = e.detail.current;
			}
			function toJoinMember(){
				
			}
			return {
				gradeInfo,
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current,
				change,
				toJoinMember
			};
		}
	}
</script>
